{% extends "../base_adminlte.html" %}
{% load custom_markdown %}
{%block head_extnds%}
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>知识图谱</title>
    <link rel="stylesheet" href="/static/chatbot/css/popoto.min.css">
    <style>
        .ppt-taxo__span-icon.system:before {
            content: "\f007";
            color: #8bb71a;
        }

        .ppt-taxo__span-icon.error:before {
            content: "\f0c3";
            color: #8bb71a;
        }

        .ppt-taxo__span-icon.link_module:before {
            content: "\f07c";
            color: #8bb71a;
        }

        .ppt-taxo__span-icon.err_class:before {
            content: "\f0ac";
            color: #8bb71a;
        }

        .ppt-taxo__span-icon.server:before {
            content: "\f02c";
            color: #8bb71a;
        }

        .ppt-link__text--value {
            fill: white;
        }

        .ppt-segment {
            opacity: 0.3;
        }

        .very-thin {
            stroke-width: 1px;
            stroke: #fef0d9;
        }

        .thin {
            stroke-width: 13px;
            stroke: #fdcc8a;
        }

        .medium {
            stroke-width: 25px;
            stroke: #fc8d59;
        }

        .thick {
            stroke-width: 37px;
            stroke: #e34a33;
        }

        .very-thick {
            stroke-width: 49px;
            stroke: #b30000;
        }

    </style>
{%endblock%}
{% block content %}
<div class="content-wrapper">
  <section class="content-header">
<body class="ppt-body">
<section class="ppt-section-main">
    <div class="ppt-section-header">
        <span class="ppt-header-span">知识图谱</span>
    </div>
    <div class="ppt-container-graph">
        <nav id="popoto-taxonomy" class="ppt-taxo-nav">
            <!-- Label/taxonomy filter will be generated here -->
        </nav>
        <div id="popoto-graph" class="ppt-div-graph">
            <!-- Graph will be generated here -->
        </div>
    </div>
    <div id="popoto-cypher" class="ppt-container-cypher">
        <!-- Cypher query viewer will be generated here -->
    </div>
    <div class="ppt-section-header">
        <!-- The total results count is updated with a listener defined in script -->
        RESULTS <span id="result-total-count" class="ppt-count"></span>
    </div>
    <div id="popoto-results" class="ppt-container-results">
        <!-- Results will be generated here -->
    </div>

</section>
<script src="/static/chatbot/js/jquery.js" charset="utf-8"></script>
<script src="/static/chatbot/js/d3.js" charset="utf-8"></script>
<script src="/static/chatbot/js/popoto.js" charset="utf-8"></script>
<script>

    // URL used to access Neo4j REST API to execute queries.
     popoto.rest.CYPHER_URL = "http://192.168.32.203:7474/db/data/transaction/commit";
     popoto.rest.AUTHORIZATION = "Basic " + btoa("neo4j:Pass@2021");

    // The data is available online on a GrapheneDB instance used here
    //popoto.rest.CYPHER_URL = "https://db-kh9ct9ai1mqn6hz2itry.graphenedb.com:24780/db/data/transaction/commit";
    //popoto.rest.AUTHORIZATION = "Basic cG9wb3RvOmIuVlJZQVF2blZjV2tyLlRaYnpmTks5aHp6SHlTdXk==";

    // If set to true, the relations properties will be returned.
    popoto.query.COLLECT_RELATIONS_WITH_VALUES = true;

    // Use known min and max amount but should be extracted from data in a real application
    var maxAmount = 141396;
    var minAmount = 3044;

    // Generate size and CSS classes scales based on data using d3.
    var sizeScale = d3.scaleQuantize().domain([minAmount, maxAmount]).range([50, 75, 100, 125, 150]);
    var strokeCSSScale = d3.scaleQuantize().domain([minAmount, maxAmount]).range(["very-thin", "thin", "medium", "thick", "very-thick"]);

    // Popoto nodes provider configuration
    popoto.provider.node.Provider = {
        "system": {
            returnAttributes: ["name"],
            constraintAttribute: "name",
            autoExpandRelations: true,
            "getDisplayType": function (node) {
                return popoto.provider.node.DisplayTypes.IMAGE;
            }
        },
        "link_module": {
            returnAttributes: ["name"],
            constraintAttribute: "name",
            autoExpandRelations: true,
            "getDisplayType": function (node) {
                return popoto.provider.node.DisplayTypes.IMAGE;
            },
            "getSize": function (node) {
                if (node.type === popoto.graph.node.NodeTypes.VALUE) {
                    if (node.parent.parentRel === "rels_sys_module") {
                        if (node.attributes.hasOwnProperty("incomingRels")) {
                            return sizeScale(relationsAmount(node.attributes.incomingRels));
                        }
                    }
                }

                if (node.value !== undefined && node.value.length > 0) {
                    if (node.parentRel === "rels_sys_module") {
                        if (node.value[0].attributes.hasOwnProperty("incomingRels")) {
                            return sizeScale(relationsAmount(node.value[0].attributes.incomingRels));
                        }
                    }
                }

                return 50;
            }
        },
        "err_class": {
            returnAttributes: ["name"],
            constraintAttribute: "name",
            autoExpandRelations: true,
            "getDisplayType": function (node) {
                return popoto.provider.node.DisplayTypes.IMAGE;
            }
        },
        "err_son_class": {
            returnAttributes: ["name"],
            constraintAttribute: "name",
            autoExpandRelations: true,
            "getDisplayType": function (node) {
                return popoto.provider.node.DisplayTypes.IMAGE;
            }
        },
        "server": {
            returnAttributes: ["server","ip_addr"],
            constraintAttribute: "name",
            autoExpandRelations: true,
            "getDisplayType": function (node) {
                return popoto.provider.node.DisplayTypes.IMAGE;
            }
        },
        "know": {
            returnAttributes: ["name","son_cla_url","know_desc"],
            constraintAttribute: "name",
            autoExpandRelations: true,
            "getDisplayType": function (node) {
                return popoto.provider.node.DisplayTypes.IMAGE;
            }
        },
        "error": {
            returnAttributes: ["name","desc","err_cause","check_way","solve_way","err_effect"],
            constraintAttribute: "name",
            "getDisplayType": function (node) {
                return popoto.provider.node.DisplayTypes.IMAGE;
            }
        }
    };

    /**
     * Compute the total amount earned based on a list of relations data.
     * The count is done by doing the sum of relation amount defined by the multiplying the quantity of system sold by the system unitPrice minus the discount.
     *
     * @param relations the list of relations data.
     * @return {string} the total amount.
     */
    function relationsAmount(relations) {
        return relations.reduce(function (a, rel) {
            var relAmount = rel.quantity * parseFloat(rel.unitPrice);
            var relDiscount = rel.discount * relAmount;

            return (a + relAmount - relDiscount);
        }, 0).toFixed(2);
    }

    // Popoto links provider configuration
    popoto.provider.link.Provider = {

        // Text displayed on links
        "getTextValue": function (link) {
            if (link.type === popoto.graph.link.LinkTypes.VALUE && link.source.label === "system" && link.source.parentRel === "rels_sys_module") {
                if (link.target.attributes.hasOwnProperty("incomingRels")) {
                    return relationsAmount(link.target.attributes.incomingRels) + "$";
                }
            }

            return popoto.provider.link.DEFAULT_PROVIDER.getTextValue(link);
        },

        // CSS class added on svg links
        "getCSSClass": function (link, element) {
            if (link.type === popoto.graph.link.LinkTypes.VALUE && link.source.label === "system" && link.source.parentRel === "rels_sys_module" && (element === "path" || element === "path--hover")) {
                if (link.target.attributes.hasOwnProperty("incomingRels")) {
                    return "ppt-link__" + element + "--value " + strokeCSSScale(relationsAmount(link.target.attributes.incomingRels));
                }
            }
            return popoto.provider.link.DEFAULT_PROVIDER.getCSSClass(link, element);
        }

    };

    // Popoto taxonomies provider configuration
    popoto.provider.taxonomy.Provider = {
        "getCSSClass": function (label, element) {
            var labelAsCSSName = label.replace(/[^0-9a-z\-_]/gi, '');

            var cssClass = "ppt-taxo__" + element;

            return cssClass + " " + labelAsCSSName;
        }
    };

    popoto.result.onTotalResultCount(function (count) {
        document.getElementById("result-total-count").innerHTML = "(" + count + ")";
    });

    popoto.start("system");

</script>
</body>
  </section>
</div>
{% endblock %}